<!--
SPDX-FileCopyrightText: 2021 The Manyverse Authors

SPDX-License-Identifier: MPL-2.0
-->

<!DOCTYPE html>
<html>
  <head>
    <title>Manyverse</title>
    <meta charset="UTF-8" />
    <style>
      /* Specifically for src/frontend/components/Swiper.ts */
      .custom-swiper .slider-frame {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
      }
      /* These styles make the body full-height */
      html, body {
        height: 100%;
      }
      /* Handles styles before React app is mounted, i.e. "splashscreen" */
      body {
        background-color: #4263eb; /* brandMain */
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      /* The app container */
      #app {
        display: flex;
        height: 100%;
        overflow: hidden;
      }

      /* Necessary elements to force loading of fonts ASAP */
      .font-checker-roboto {
        font-family: Roboto;
        opacity: 0;
        position: absolute;
      }
      .font-checker-icons {
        font-family: MaterialCommunityIcons;
        opacity: 0;
        position: absolute;
      }

      /* This element will be replaced with the mounted React app */
      .splashlogo {
        width: 48px;
        height: 48px;
        margin: calc(50vh - 48px * 0.5) calc(50vw - 48px * 0.5);
      }

      /* Styles that cannot be applied in react-native-web */
      *[data-markdown-text="1"]::selection {
        background-color: #91a7ff; /* backgroundTextSelection */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="font-checker-roboto">x</div>
      <div class="font-checker-icons">x</div>
      <img class="splashlogo" src="./renderer-dist/logo_outline.png" />
    </div>
    <div id="dialogs"></div>
    <div id="toasts"></div>
    <script charset="UTF-8" src="./renderer-dist/index.js"></script>
  </body>
</html>
